<template>
    <el-dialog
        :model-value="modelValue"
        :title="title"
        :width="width"
        :before-close="handleClose"
        :custom-class="customClass"
        :close-on-click-modal="isCloseModal"
        :close-on-press-escape="false"
        :top="top"
    >
        <slot />
        <template
            v-if="isFooter"
            #footer
        >
            <slot name="dialogFooter">
                <button-list @handle-but-click="handleButClick" />
            </slot>
        </template>
    </el-dialog>
</template>

<script setup name="dialogModule">
defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    isCloseModal: {
        type: Boolean,
        default: false
    },
    customClass: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '718px'
    },
    top: {
        type: String,
        default: '70px'
    },
    isFooter: {
        type: Boolean,
        default: true
    }
})
const emit = defineEmits(['update:modelValue', 'handleButClick'])
const handleClose = () => {
    emit('update:modelValue', false)
}
const handleButClick = (e) => {
    if (e.isClone) {
        handleClose()
    } else {
        emit('handleButClick', e)
    }
}
</script>

<style lang="scss" scoped></style>
